<template>
  <div class="nav-header">
    <component
      class="icons item-icon"
      :is="isFold ? `expand` : `fold`"
      @click="alterIcon"
    ></component>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'

export default defineComponent({
  emits: ['changeFold'],
  setup(props, { emit }) {
    let isFold = ref(false)
    //点击更改图标与折叠效果
    const alterIcon = () => {
      isFold.value = !isFold.value
      emit('changeFold', isFold.value)
    }
    return { isFold, alterIcon }
  }
})
</script>

<style scoped lang="less">
.nav-header {
  .item-icon {
    width: 30px;
    margin-top: 10px;
  }
}
</style>
